﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>我爱我家</title>
    <link href="meigong.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script src="js/mockdata.js" type="text/javascript"></script>
    <script src="js/lablemaker.js" type="text/javascript"></script>
    <script src="js/MapUtil.js" type="text/javascript"></script> 
</head>
<body>
<div class="block">
<!--pageheader-->
    <div class="Cheader">
    	<div><img src="images/logo.gif" /></div>
    </div>
<!--pageheader-->   
<div class="blank15"></div>
<div class="LeftC f_l">
  <div class="cate_top">购房快速导航</div>
  <div class="category_tree">
  <ul class="searchfilterparent">
    <li>
    	<h1><a href="#">售价：</a></h1>
        <span><a href="#" class="searchfilter filter_selected" filtertype="price" filtervalue="[0,-1]">价格不限</a></span>
        <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[0,50]">50万以下</a></span>
        <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[200,250]">200-250万</a></span>
        <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[50,80]">50-80万</a></span>
        <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[250,300]">250-300万</a></span>
        <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[80,100]">80-100万</a></span>
        <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[300,500]">300-500万</a></span>
        <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[100,120]">100-120万</a></span>
        <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[500,1000]">500-1000万</a></span>
        <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[120,150]">120-150万</a></span>
        <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[1000,-1]">1000万以上</a></span>
        <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[150,200]">150-200万</a></span>
     </li>
   </ul>
   <ul class="searchfilterparent">
     <li>
    	<h1><a href="#">房型：</a></h1>
        <span><a href="#" class="searchfilter filter_selected" filtertype="rooms" filtervalue="0">房型不限</a></span>
        <span><a href="#" class="searchfilter" filtertype="rooms" filtervalue="1">一室</a></span>
        <span><a href="#" class="searchfilter" filtertype="rooms" filtervalue="4">四室</a></span>
        <span><a href="#" class="searchfilter" filtertype="rooms" filtervalue="2">二室</a></span>
        <span><a href="#" class="searchfilter" filtertype="rooms" filtervalue="5">五室</a></span>
        <span><a href="#" class="searchfilter" filtertype="rooms" filtervalue="3">三室</a></span>
        <span><a href="#" class="searchfilter" filtertype="rooms" filtervalue="6">五室以上</a></span>
     </li>
  </ul>
  
  </div>  

<DIV class="my_left_category">
    <DIV class="my_left_cat_list">
        <DIV class="h2_cat" onMouseOver="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'" style="margin-top:0px">
          <H3 style="OVERFLOW: hidden"><A href="#">面积</A></H3>
          <DIV class="h3_cat">
              <DIV class="shadow">
                  <DIV class="shadow_border">
                      <UL class="searchfilterparent">
                          <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[0,-1]">面积不限</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[130,150]">130-150平米</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[0,50]">50平米以下</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[150,200]">150-200平米</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[50,70]">50-70平米</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[200,300]">200-300平米</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[70,90]">70-90平米</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[300,500]">300-500平米</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[90,110]">90-110平米</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[500,-1]">500平米以上</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[110,130]">110-130平米</A></LI>
                      </UL>
                  </DIV>
              </DIV>
          </DIV>
        </DIV>
        <DIV class="h2_cat" onMouseOver="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
          <H3 style="OVERFLOW: hidden"><A href="#">建造年代</A></H3>
          <DIV class="h3_cat">
              <DIV class="shadow">
                  <DIV class="shadow_border">
                      <UL class="searchfilterparent">
                          <LI><A href="#" class="searchfilter" filtertype="age" filtervalue="0">建造年代不限</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="age" filtervalue="1">1995-2000年</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="age" filtervalue="2">2008年后</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="age" filtervalue="3">1995年前</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="age" filtervalue="4">2000-2008年</A></LI> 
                      </UL>
                  </DIV>
              </DIV>
          </DIV>
        </DIV>
        <DIV class="h2_cat" onMouseOver="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
          <H3 style="OVERFLOW: hidden"><A href="#">类型</A></H3>
          <DIV class="h3_cat">
              <DIV class="shadow">
                  <DIV class="shadow_border">
                      <UL class="searchfilterparent">
                          <LI><A href="#" class="searchfilter" filtertype="type" filtervalue="0">类型不限</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="type" filtervalue="1">普通住宅</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="type" filtervalue="2">四合院</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="type" filtervalue="3">别墅</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="type" filtervalue="4">公寓</A></LI>
                          <LI><A href="#" class="searchfilter" filtertype="type" filtervalue="5">其它</A></LI> 
                      </UL>
                  </DIV>
              </DIV>
          </DIV>
        </DIV>
    </DIV>
</DIV> 
</div>  
    <div class="f_l" style=" margin-left:10px; display:inline">

<div class="taoshu" onmouseover="this.className='taoshuon'"  onmouseout="this.className='taoshu'"><div class="fleft"><a href="javascript:;" onclick="alert_win.style.display='block';">100套</a></div><div class="fright">满庭芳园</div></div>


    <!--美工-->
    <div id="alert_win" style="display:block;">
    <div id="mask" style="top:0;left:0;position: absolute;z-index:1000;" class="bg"></div>
    <DIV class=beian_winBG id=beian_popup>
    <!--弹出框-->
    <div id="divOneStep" style="z-index:1002;width:100%; height:500px;background: #fff;position:absolute;">
    <div class="t_top"><div><font class="fonta">华润置地</font>&nbsp;&nbsp;&nbsp;<font class="fontb">均价:￥58888</font></div><span><a href="javascript:;" onclick="alert_win.style.display='none';">点此关闭</a></span></div>
    <div class="z_mid">
    <div class="zm_left">
    <h1>按售价筛选:</h1>
    <ul>
    <li><a href="#">不限</a></li>
    <li><a href="#">250-300万</a></li>
    <li><a href="#">300-500万</a></li>
    <li><a href="#">500-1000万</a></li>
    </ul>
    <h1>按房型筛选:</h1>
    <ul>
    <li><a href="#">不限</a></li>
    <li><a href="#">一室</a></li>
    <li><a href="#">二室</a></li>
    <li><a href="#">三室</a></li>
    </ul>
    <ul>
    <li><a href="#">查看小区详情>></a></li>
    <li><a href="#">查看小区房价>></a></li>
    </ul>
    </div>
    <div class="zm_right">  
        <div class="fytop">
        <ul>
        <li class="f_1">找到23套房子</li>
        <li class="f_2"><input type="radio" />多图房源</li>
        <li class="f_3">排序:</li>
        <li><img src="images/i_1.gif" /></li>
        <li><img src="images/i_2.gif" /></li>
        </ul>
        </div>
        <div class="fy_list">
        <ul>
        <li class="img"><a href="#"><img src="images/img_11.gif" /></a></li>
        <li class="wz"><h1><a href="#">正宗板楼 金融街高档社区 稀缺户型...</a></h1>
        <p>3室2厅，185.00平米，10层</p><img src="images/dt.gif" /></li>
        <li class="jg">1600万</li>
        </ul>
        <ul>
        <li class="img"><a href="#"><img src="images/img_11.gif" /></a></li>
        <li class="wz"><h1><a href="#">正宗板楼 金融街高档社区 稀缺户型...</a></h1>
        <p>3室2厅，185.00平米，10层</p><img src="images/dt.gif" /></li>
        <li class="jg">1600万</li>
        </ul>
        <ul>
        <li class="img"><a href="#"><img src="images/img_11.gif" /></a></li>
        <li class="wz"><h1><a href="#">正宗板楼 金融街高档社区 稀缺户型...</a></h1>
        <p>3室2厅，185.00平米，10层</p><img src="images/dt.gif" /></li>
        <li class="jg">1600万</li>
        </ul>
        <ul>
        <li class="img"><a href="#"><img src="images/img_11.gif" /></a></li>
        <li class="wz"><h1><a href="#">正宗板楼 金融街高档社区 稀缺户型...</a></h1>
        <p>3室2厅，185.00平米，10层</p><img src="images/dt.gif" /></li>
        <li class="jg">1600万</li>
        </ul>
        <ul>
        <li class="img"><a href="#"><img src="images/img_11.gif" /></a></li>
        <li class="wz"><h1><a href="#">正宗板楼 金融街高档社区 稀缺户型...</a></h1>
        <p>3室2厅，185.00平米，10层</p><img src="images/dt.gif" /></li>
        <li class="jg">1600万</li>
        </ul>
        <ul>
        <li class="img"><a href="#"><img src="images/img_11.gif" /></a></li>
        <li class="wz"><h1><a href="#">正宗板楼 金融街高档社区 稀缺户型...</a></h1>
        <p>3室2厅，185.00平米，10层</p><img src="images/dt.gif" /></li>
        <li class="jg">1600万</li>
        </ul>
        </div>
        <table width="100%" border="0" cellspacing="0" cellpadding="10">
          <tr>
            <td width="165" align="center"><img src="images/syy.gif" /></td>
            <td align="center">2/13</td>
            <td width="165" align="center"><img src="images/syy.gif" /></td>
          </tr>
        </table>
    </div>
    </div>
    <p><img src="images/z_bot.gif" /></p>
    </div>
    </DIV>
    </div>
    <!--美工-->
    <div id="map_canvas" class="map_canvas" style="margin-top:50px"></div>
    </div> 
</div>
 <!--<script type="text/javascript">
     $(document).ready(function () {
         searchHouse.initialize({
             mapCanvas: ".map_canvas",
             width: 700,
             height: 500,
             mapView: ".mapView",
             satelliteView: ".satelliteView",
             searchFilter: ".searchfilter",
             searchFilterSelected: ".filter_selected",
             searchFilterParent: '.searchfilterparent',
             searchFilterTypeAttr: 'filtertype',
             searchFilterValueAttr: 'filtervalue'
         }
            );
     });

     var searchHouse = {
         map: null,
         markerManager: null,
         mapCanvas: null,
         zoomCategory: { city: 9, area: 12, detail: 16 },
         defultMapOptions: {
             zoom: 9,
             minZoom: 9,
             center: new google.maps.LatLng(39.90555, 116.39147),
             mapTypeId: google.maps.MapTypeId.ROADMAP,
             mapTypeControl: false
         },
         beijing: new google.maps.LatLng(39.90555, 116.39147),
         makerManager: null,
         constants: { size: '面积', age: '建造年代', type: '类型' },
         h2_cat: '.h2_cat',
         h2_cat_title: " > h3 > a",
         mapOptions: null,
         searchHouseOptions: null,
         searchHouseFilters: { price: [0, -1], rooms: 0, size: [0, -1], age: 0, type: 0, bound: [], zoom: 9 },
         initializeSearchHouseOptions: function (_searchHouseOptions) {
             this.searchHouseOptions = {
                 mapCanvas: _searchHouseOptions.mapCanvas,
                 width: _searchHouseOptions.width,
                 height: _searchHouseOptions.height,
                 mapView: _searchHouseOptions.mapView,
                 satelliteView: _searchHouseOptions.satelliteView,
                 searchFilter: _searchHouseOptions.searchFilter,
                 searchFilterParent: _searchHouseOptions.searchFilterParent,
                 searchFilterSelected: _searchHouseOptions.searchFilterSelected,
                 searchFilterTypeAttr: _searchHouseOptions.searchFilterTypeAttr,
                 searchFilterValueAttr: _searchHouseOptions.searchFilterValueAttr
             };
         },
         initialize: function (_searchHouseOptions, _mapOptions) {
             this.initializeSearchHouseOptions(_searchHouseOptions);
             this.mapCanvas = $(this.searchHouseOptions.mapCanvas);
             if (this.searchHouseOptions.width) this.mapCanvas.width(this.searchHouseOptions.width);
             if (this.searchHouseOptions.height) this.mapCanvas.height(this.searchHouseOptions.height);
             this.mapOptions = _mapOptions ? _mapOptions : this.defultMapOptions;
             this.map = new google.maps.Map(this.mapCanvas.get(0), this.mapOptions);
             this.markerManager = new MarkerManager(this.map);

             //map events
             google.maps.event.addListener(this.map, "bounds_changed", function () {
                 searchHouse.searchHouseFilters.bound = searchHouse.getMapBounds();
                 searchHouse.showSearchHouseResultAuto();
             });
             google.maps.event.addListener(this.map, "zoom_changed", function () {
                 searchHouse.searchHouseFilters.zoom = searchHouse.map.getZoom();
                 //searchHouse.showSearchHouseResultAuto();
             });

             $(this.searchHouseOptions.mapView).click(function () {
                 searchHouse.map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
             });
             $(this.searchHouseOptions.satelliteView).click(function () {
                 searchHouse.map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
             });
             $(this.searchHouseOptions.searchFilter).click(function () {
                 var filtertype = $(this).attr(searchHouse.searchHouseOptions.searchFilterTypeAttr);
                 var filtervalue = $(this).attr(searchHouse.searchHouseOptions.searchFilterValueAttr)
                 if (filtertype && filtervalue) {
                     var selectedFilterClass = searchHouse.searchHouseOptions.searchFilterSelected + "[" + searchHouse.searchHouseOptions.searchFilterTypeAttr + "]";
                     $(this).parentsUntil(searchHouse.searchHouseOptions.searchFilterParent).parent().find(selectedFilterClass).removeClass(searchHouse.searchHouseOptions.searchFilterSelected.substr(1));
                     $(this).addClass(searchHouse.searchHouseOptions.searchFilterSelected.substr(1));
                     var h2_cat = $(this).parents(searchHouse.h2_cat);
                     if (h2_cat.size() > 0) {
                         $(h2_cat).find(searchHouse.h2_cat_title).text($(this).text()).css("color", "#EB5F00");
                     }
                     searchHouse.searchHouseFilters[filtertype] = eval(filtervalue);
                     searchHouse.showSearchHouseResultAuto();
                 }
             });
         },
         getSearchHouseFilters: function () {
         },
         getMapBounds: function () {
             var boulds = searchHouse.map.getBounds();
             var northEast = boulds.getNorthEast();
             var southWest = boulds.getSouthWest();
             return [northEast, southWest];
         },
         getSearchHouseResult: function (_searchHouseFilters) {
             var zoom = searchHouse.searchHouseFilters.zoom;
             var zoomType = searchHouse.getZoomType(zoom);
             if (zoomType == 'city') {
                 return eval(liresult);
             }
             else if (zoomType == 'area') {
                 return eval(miresult)
             }
             else {
                 return eval(lagresult);
             }
         },
         showSearchHouseResult: function (_searchHouseResult) {
             searchHouse.markerManager.clearMarkers();
             var zoom = searchHouse.searchHouseFilters.zoom;
             var type = searchHouse.getZoomType(zoom);
             $(_searchHouseResult).each(function (i, n) {
                 var latlng = new google.maps.LatLng(n[1], n[2]);
                 var innerHtml = searchHouse.getMarkerHtml({ title: n[0], count: n[3], type: type });
                 var className = type + 'marker';
                 var marker = searchHouse.markerManager.addMarker(latlng,
                                                         { clickable: true,
                                                             className: className,
                                                             title: n[0],
                                                             innerHTML: innerHtml,
                                                             data: { zoomtype: type, result: n },
                                                             click: function (e) {
                                                                 var zoomtype = $(this).data('data').zoomtype;
                                                                 var events = { city: searchHouse.cityMarkerClick,
                                                                     area: searchHouse.areaMarkerClick,
                                                                     detail: searchHouse.detailMarkerClick
                                                                 };
                                                                 return events[zoomtype]($(this));
                                                             }
                                                         },
                                                         searchHouse.map);
             });
         },
         showSearchHouseResultAuto: function () {
             var results = searchHouse.getSearchHouseResult(searchHouse.searchHouseFilters);
             searchHouse.showSearchHouseResult(results);
         },
         getMarkerHtml: function (options) {
             if (options.type == 'city') {
                 return "<table border='0' cellpadding='0'  cellspacing='0'><tr><td class='left'>" + options.title + "</td><td class='right'>" + options.count + "</td></tr></table>"
             }
             else if (options.type == 'area') {
                 return "<span class='left'>" + options.count + "&nbsp;套</span>&nbsp;<span class='right'>" + options.title + "</span>";
             }
             else {
                 return "<strong>" + options.count + "&nbsp;套</strong>&nbsp;<span class='areatitle'>" + options.title + "</span>";
             }
         },
         getZoomType: function (zoom) {
             var zoomType = 'city';
             var zoomTypes = ['city', 'area', 'detail'];
             $(zoomTypes).each(function (i, n) {
                 if (zoom >= searchHouse.zoomCategory[n]) {
                     zoomType = n;
                 }
                 else {
                     return;
                 }
             });
             return zoomType;
         },
         cityMarkerClick: function (markerDiv) {
             var areaZoom = searchHouse.zoomCategory.area;
             var result = $(markerDiv).data('data').result;
             var centerLatLng = new google.maps.LatLng(result[1], result[2]);
             searchHouse.map.setCenter(centerLatLng);
             searchHouse.map.setZoom(areaZoom);
         },
         areaMarkerClick: function (markerDiv) {
             alert('area');
         },
         detailMarkerClick: function (markerDiv) {
             alert('detail');
         }
     };
      
    </script>-->
</body>
</html>
